<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3;
            /* 灰色背景 */

            display: flex;
            /* flex弹性布局 */
            justify-content: space-between;
            /* 左右对齐 */

            padding: 10px;
            /* 内边距 */
            align-items: center;
            /* 垂直居中 */
        }

        .navbar h1 {
            margin: 0;
            /* 移除默认的上下外边距 */
            font-weight: bold;
            /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }

        .navbar a {
            color: white;
            /* 链接颜色为白色 */
            text-decoration: none;
            /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px;
            /* 控件之间的间距 */
            margin: 20px 0;
        }

        .search-form input[type="text"],
        .search-form select {
            padding: 5px;
            /* 输入框内边距 */
            width: 260px;
            /* 宽度 */
        }

        .search-form button {
            padding: 5px 15px;
            /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            /* 边框 */
            padding: 8px;
            /* 单元格内边距 */
            text-align: center;
            /* 左对齐 */
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .avatar {
            width: 30px;
            height: 30px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #b5b3b3;
            /* 灰色背景 */
            color: white;
            /* 白色文字 */
            text-align: center;
            /* 居中文本 */
            padding: 10px 0;
            /* 上下内边距 */
            margin-top: 30px;
        }

        #container {
            width: 80%;
            /* 宽度为80% */
            margin: 0 auto;
            /* 水平居中 */
        }
    </style>
</head>

<body>
    <div id="container">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#">退出登录</a>
        </div>

        <!-- 调试暂时显示 -->
        {{searchForm}}


        <!-- 搜索表单区域 -->
        <form class="search-form" action="/search" method="post">
            <label for="name">姓名：</label>
            <!-- 输入框，添加v-model绑定数据，当输入内容时，searchForm中的name属性数据会自动更新，反过来绑定的数据变化，这个输入框中的数据也会自动更新-->
            <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">

            <label for="gender">性别：</label>
            <!-- 下拉框，添加v-model绑定数据，当选择选项时，searchForm中的gender属性数据会自动更新 -->
            <select id="gender" name="gender" v-model="searchForm.gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label for="position">职位：</label>
            <!-- 下拉框，添加v-model绑定数据，当选择选项时，searchForm中的job属性数据会自动更新 -->
            <select id="position" name="position" v-model="searchForm.job">
                <option value=""></option>
                <option value="1">班主任</option>
                <option value="2">讲师</option>
                <option value="3">学工主管</option>
                <option value="4">教研主管</option>
                <option value="5">咨询师</option>
            </select>

            <!-- 查询按钮，添加v-on绑定事件，当点击后触发printf方法 -->
            <button id="btn1" type="button" v-on:click="printf">查询</button>
            <!-- 清空按钮，添加v-on绑定事件，当点击后触发clear方法 -->
            <button id="btn2" type="reset" v-on:click="clear">清空</button>
        </form>

        <!-- 表格展示区 -->
        <table>
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <!-- 表格主体内容 -->
            <tbody>
                <!--如果你想重复渲染同种标签，就用 v-for 循环 
                    v-for 循环，遍历empList数组，将每个员工信息渲染到表格中
                    利用插值表达式，取出数组中的每一个emp对象，再将对应数据渲染到表格中-->
                <tr v-for="(emp, index) in empList" :key="emp.id">
                    <td>{{index + 1}}</td>
                    <td>{{emp.name}}</td>
                    <td>{{emp.gender=1?'男':'女'}}</td>
                    <!-- 属性不能直接使用插值表达式，需要用v-bind绑定  格式 v-bind:属性名="渲染的变量名" 简化格式 :属性名="变量名"-->
                    <td><img class="avatar" v-bind:src="emp.image" :alt="emp.name"></td>

                    <td>
                        <!-- v-if v-else-if -->
                        <!-- 遇到选择很多个选项时，用v-if和v-else-if和v-else 或 v-show -->
                        <!-- 当职位等于1时，显示“班主任”，当职位等于2时，显示“讲师”等等 只会渲染符合条件的标签，其余的标签不会渲染 -->
                        <span v-if="     emp.job == 1">班主任</span>
                        <span v-else-if="emp.job == 2">讲师</span>
                        <span v-else-if="emp.job == 3">学工主管</span>
                        <span v-else-if="emp.job == 4">教研主管</span>
                        <span v-else-if="emp.job == 5">咨询师</span>
                        <span v-else>其他</span>


                        <!-- v-show  浏览器中的显示效果，渲染所有标签，但把不符合的通过css属性display:none隐藏 -->

                        <!-- <span v-show="emp.job == 1" >班主任</span>
                        <span v-show="emp.job == 2" >讲师</span>
                        <span v-show="emp.job == 3" >学工主管</span>
                        <span v-show="emp.job == 4" >教研主管</span>
                        <span v-show="emp.job == 5"> 咨询师</span> -->

                        <!--  
                        浏览器中的显示效果，渲染所有标签，但把不符合的通过css属性display:none隐藏
                        <span>班主任</span>
                        <span style="display: none;">讲师</span>
                        <span style="display: none;">学工主管</span>
                        <span style="display: none;">教研主管</span>
                        <span style="display: none;">咨询师</span>                     -->
                    </td>
                    <td>{{emp.entrydate}}</td>
                    <td>{{emp.updatetime}}</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>

            </tbody>
        </table>

        <!-- 页脚版权区域 -->
        <footer class="footer">
            <p>江苏传智播客教育科技股份有限公司</p>
            <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
        </footer>
    </div>


    <script src="./js/axios.js"></script>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


        createApp({
            data() {
                return {
                    // 数组名称必须定义在Data中；现在没有任何数据了，通过请求的方式拿到数据;
                    empList: [],
                    // 绑定的搜索表单数据，双向绑定，搜索栏输入的值会绑定到当前对象的属性中
                    searchForm: {
                        name: '',
                        job: '',
                        gender: ''
                    }
                }
            },
            // 方法的定义，为事件绑定v-on提供响应方法
            methods: {
                async printf() {
                    // 异步请求
                    // 当点击查询按钮后，执行函数，发送get异步请求，访问url地址，获取数据
                    // axios.get('https://web-server.itheima.net/emps/list?name='+this.searchForm.name+'&job='+this.searchForm.job+'&gender='+this.searchForm.gender)
                    // .then((result) => {
                    //    console.log(result.data.data)
                    //    this.empList = result.data.data;
                    // }).catch((err) => {

                    // });

                    // 异步请求改为同步请求，加上两个关键字async await，就会等待响应结果，再执行下一步
                    let result = await axios.get('https://web-server.itheima.net/emps/list?name=' + this.searchForm.name + '&job=' + this.searchForm.job + '&gender=' + this.searchForm.gender);
                    console.log(result.data.data)
                    this.empList = result.data.data;
                },
                clear() {
                    this.searchForm.name = '';
                    this.searchForm.job = '';
                    this.searchForm.gender = '';
                    this.printf();


                }
            },

            // 编写钩子函数,当Vue组件创建完毕时（即页面加载完毕，Vue状态是mounted时），自动执行printf()方法，来查询数据
            mounted() {
                this.printf();
            }
        }).mount('#container')  // 挂载，就是接管id为container的div元素

    </script>



</body>

</html>